<template>
    <div class="m-2">
      <!-- 搜索区域  -->
      <searchFrom exportType="avg_order" :searchInfo="searchInfo" :hasAvg="true" :hasRoot="true" @confirmSearch="handleSearch"/>

      <!-- 列表  -->
      <BasicTable @register="registerTable">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'categories_tree'">
            <div class="white-wrap">
              {{ record.categories_tree }}
            </div>
          </template>
          <template v-else-if="column.key === 'root_cate'">
            <div class="white-wrap">
              {{ record.root_cate }}
            </div>
          </template>
          <template v-else-if="column.key === 'average_order'">
            <div v-for="i in record.average_order">
              {{i.month}}日均单量： {{ getDaysInMonth(i.month, i.order_num) }}
            </div>
          </template>
          <template v-else-if="column.key === 'image'">
            <div class="text-center w-full">
              <Image
                :height="140"
                :src="record.image"
              />
            </div>
          </template>
          <template v-else-if="column.key === '_id'">
            <Tag class="cursor-pointer" color="green" @click="keepa_detail(record)">{{ record._id }}</Tag>
          </template>
          <template v-else-if="column.key === 'sj_name'">
            <Tag class="cursor-pointer" color="red" @click="showProductInfo(record)">{{ record.sj_name }}</Tag>
          </template>
          <template v-else-if="column.key === 'avg_num'">
            <div v-for="i in record.current">
              {{i.month}}日均单量： {{ getDaysInMonth(i.month, i.order_num) }}
            </div>
          </template>
          <template v-else-if="column.key === 'last_avg_num'">
            <div v-for="i in record.last">
              {{i.month}}日均单量： {{ getDaysInMonth(i.month, i.order_num) }}
            </div>
          </template>
        </template>
      </BasicTable>
      <BasicModal
        @keepaDetail="keepa_detail"
        @register="register"
        :modalData="modalData"
        @visible-change="setModalData"
      />
    </div>
</template>

<script lang="ts" setup>
import {h} from 'vue';
import searchFrom from '/@/components/Custom/SearchFrom.vue'
import {Tag, Image} from 'ant-design-vue';
import {reactive, ref} from 'vue'
import {BasicTable, useTable, BasicColumn} from '/@/components/Table';
import {getAvgOrder, getProductBySjNameGroup} from "/@/api/demo/product";
import {useModal} from "/@/components/Modal";
import BasicModal from '/@/components/Custom/Modal.vue'

const columns: BasicColumn[] = [
  {
    title: 'ASIN',
    dataIndex: '_id',
    fixed: 'left',
    width: 140
  },
  {
    title: '图片',
    dataIndex: 'image',
    width: 160
  },
  {
    title: '根分类',
    dataIndex: 'root_cate',
    width: 210
  },
  {
    title: '数据名(产品线)',
    dataIndex: 'sj_name',
    width: 210,
  },

  {
    title: 'Amazon分类树',
    dataIndex: 'categories_tree',
    width: 210
  },
  {
    title: '所属组',
    dataIndex: 'group_name',
    width: 210
  },
  {
    title: '产品线日均单',
    dataIndex: 'average_order',
    width: 210
  },
  {
    title: '日均单量',
    dataIndex: 'avg_num',
    width: 210
  },
  {
    title: '环比日均单',
    dataIndex: 'last_avg_num',
    width: 210
  },
];
const [register, { openModal: openProductModal, setModalProps }] = useModal()
const searchInfo = reactive<Recordable>({
  page: 1,
  domainId: '',
  pageSize: 30,
})
const modalData = ref([])

/**
 * 关闭前清空模态框数据
 * @param visible
 */
function setModalData(visible) {
  if (!visible) {
    modalData.value = []
  }
}

const [registerTable, {reload}] = useTable({
  api: getAvgOrder,
  columns: columns,
  searchInfo: searchInfo,
  immediate: false,
  showIndexColumn: false,
  bordered: true,
  showTableSetting: false,
  pagination: false,
});

/**
 * 查看数据名产品组内信息
 * @param detail
 */
function showProductInfo(detail) {
  var formState = {
    sj_name: detail['sj_name'],
    catId: detail['category_id'],
    month_range: searchInfo.month_range,
    domainId: detail['domain_id'],
  }
  openProductModal()
  setModalProps({ loading: true })
  getProductBySjNameGroup(formState).then(
    (res) => {
      var total_num = 0
      for (var i in res) {
        var item = res[i]
        total_num += item.group_count
      }
      modalData.value = {
        data: res,
        title: detail['sj_name'] + '(' + total_num + ')',
      }
      setModalProps({ loading: false })
    },
    (error) => {
      console.log(error)
    },
  )
}

function handleSearch(formData) {
  searchInfo.page = 1
  searchInfo.domainId = parseInt(formData.domainId)
  searchInfo.month_range = formData.month_range
  searchInfo.avg_num = parseInt(formData.avg_num)
  searchInfo.root_cate = formData.root_cate
  reload()
}

function getDaysInMonth(month_str, orders): number {
  var month_arr = month_str.split('-')
  var year = parseInt(month_arr[0])
  var month = parseInt(month_arr[1])

  const date = new Date(year, month, 0);
  return (orders/date.getDate()).toFixed(2);
}

const keepa_detail = (item) => {
  const keepa_url = 'https://keepa.com/#!product/'
  var keepa_detail = item.domain_id + '-' + item._id
  window.open(keepa_url + keepa_detail, '_blank')
}

</script>

<style>
.white-wrap{
  white-space: pre-wrap;
}
.ant-image {
  display: flex;
  justify-content: center;
  padding: 2px 0;
}
</style>
